<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>常用指令：v-on</title>
		<script type="text/javascript" src="../js/framework/vue.js"></script>
		<script>
			window.onload = function () {
				let vm = new Vue({
					el: '#v_any',
					data: {  //存储数据
						arr: [1,2,3,4,5]
					},
					methods: {  //存储方法
						show: function (){
							console.info('show方法');
						},
						add () {  //es6语法
							console.info(this);  //this表示当前的Vue实例
							console.info(this === vm);  //结果为true，说明this就是当前的Vue实例
							console.info('add方法');
							
							// 向数组添加元素（方法一）
							// vm.arr.push(12345);
							
							// 向数组添加元素（方法二，推荐使用）
							this.arr.push(666);
							
							// 使用Vue实例中的方法
							this.show();
							
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="v_any">
			<!--show方法，如果不传参数可以不加()，传参数才需要加()-->
			<button v-on:click="show()">点我</button>
			<button v-on:click="add()">向数组添加一个元素</button>
			<br />
			<span>数组=</span>{{arr}}
			
			<br>
			<button v-on:mouseover="show">鼠标经过执行</button>
		</div>
	</body>
</html>
